<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文字逐渐显示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            background-color: #f5f5d5;
        }
        p{
            width: 80vw;
            margin: 30px;
            padding: 10px;
            border-radius: 10px ;
            text-indent: 2em;
            line-height: 28px;
            font-family: cursive;
            background-color: #fff;
            box-shadow: 0px 0px 10 #ccc;
        }
    </style>
</head>

<body>
    <p></p>
    <script>
        var text="人性中最真实的一面，大抵如此。曾经我们习惯委屈自己，只为顾及身边每一个人的感受。经历越多越会明白：不是所有善良，都能得到回应；不是所有让步，都能换回感激。人生在世，不是所有的人，都配得上你的胸襟和格局。"
        text+="老曹是地地道道的农村人，寒窗苦读十年，考上了北京一所高校。"

        text+="毕业之后，他又在一所三甲医院做医生。"

        text+="可自打农村的亲戚、朋友们知道之后，他的生活就再无安宁。"

        text+="一开始，亲朋们听说他在北京混得还不错，就各种找他帮忙。"

        text+="有让他帮忙排队挂号的，有让他帮忙看病的，有让他帮忙私下买药的。"

        text+="老曹念着往日的情分，不忍拒绝。忙前忙后，都给人办了。"

        text+="可是这些事情，免不了要出钱。"

        text+="一开始几十几百的小钱，他咬咬牙都算了。"

        text+="可是后来孩子出生，父母又卧病在床。"

        text+="眼见着找自己帮忙的人越来越多，花出去的钱怎么也拿不回来，老曹便开始婉拒乡亲们的请求。"

        text+="没想到曾经受到他恩惠的人，竟在背后数落他。"

        text+="“小气”“忘恩负义”“到了北京人都飘了”……"

        text+="老曹心凉了半截，一直觉得自己做的够意思了，最后竟未落得一个好字。"

        text+="歌曲《烂好人》下曾有一条网易热评："

        text+="对谁都真心却做不成好人；有人对着你微笑，背后说你蠢笨；有人收了你礼物，心里骂你穷困。"

        text+="人的心理，常常是你对别人越好，对方越觉得理所当然。"

        text+="笑脸给多了，惯的都是毛病，太好说话，会让人觉得你是个没有脾气的傻子。"

        text+="所以付出，要看对谁；帮人，也要看自己的能力。"

        text+="没有边界的心软，毫无尺度的包容，身边的坏人只会越来越多。"
        let index=-1;

        const timer=setInterval(()=>{
            if(index<text.length-1){
                index++;
                document.querySelector("p").innerText+=text.charAt(index);
            }else{
                clearInterval(timer);
                // console.log(timer)
                // setTimeout(()=>{
                //     clearInterval(timer);
                // },100)
            }
        },10)
    </script>
</body>

</html>